.btn{
    &:link,
    &:visited {
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.5rem 4rem;
        display: inline-block;
        border-radius: 10rem;
        transition: all .2s;
        position: relative;
     }

    &:hover{
        transform: translateY(-.3rem);
        box-shadow: 0 1rem 2rem rgba($color-black, .2);
    } 
    &:active{
        transform: translateY(-1px);
        box-shadow: 0 .5rem 1rem rgba($color-black, .2);
    }
    &-white{
        background-color: $color-write;
        color:$color-gray-dark;
    }
    &::after{
        content: "";
        display: inline-block;
        height: 100%;
        width: 100%;
        border-radius: 100px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    
        transition: all .2s;
    }
    &-white::after{
        background-color: $color-write;
    }
    &:hover::after{
        transform: scaleX(1.4) scaleY(1.6);
        opacity: 0;
    }
    &-animated{
        animation: moveInBottom .5s ease-out .75s;
        animation-fill-mode:backwards;
    }


}

.btn-text{
    &:link,
    &:visited{
        font-size: $default-font-size;
        color: $color-primary;
        display:inline-block;
        text-decoration: none;
        border-bottom: 1px solid $color-primary;
        padding: 3px;
        transition: all .2s;
    }
    &:hover{
        background-color: $color-primary;
        color:$color-write;
        box-shadow:0 1rem 2rem rgba($color-black, .15);
        transform: translateY(-2px);
    }
    &:active{
        box-shadow:0 .5rem 1rem rgba($color-black, .15);
        transform: translateY(0px);
    }
}
